<template>
	<view class="packageCardContainer">

		<view class="backgroundImg">
			<view class="carouselChart">
				<liu-slide-img :list="listPoster" :autoplay="autoplay" :interval="interval"
					@click="mypackageFn"></liu-slide-img>
			</view>

			<!-- <view class="padding50 flex-columns">
				<text>我的套餐卡</text>
				<view class="margin-top_16rpx flex-start-center">
					<text>20</text>
					<image src="../../static/会员卡商城加套餐卡/组合 410.png" mode=""></image>
				</view>

			</view> -->

		</view>
		<!-- 套餐卡列表 -->
		<view class="packageCardList">
			<view class="flex-between">
				<!-- 搜索框 -->
				<view class="search-content">

					<image class="search-img" src="../../static/会员卡商城加套餐卡/组合 405.png" mode=""></image>
					<input placeholder="搜索您想要的套餐卡" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
						style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
					<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
				</view>
				<!-- 销量价格 -->
				<view class="flex" @click="salesVolume()">
					<view>销量</view>
					<view style="margin-left: 4px">
						<view :class="[salesVolumeIndex==1 ? 'triangle-up-active' : 'triangle-up']"></view>
						<view :class="[salesVolumeIndex==1 ? 'triangle-down ' : 'triangle-down-active']"></view>
					</view>
				</view>

				<view class="flex" @click="price()">
					<view>价格</view>
					<view style="margin-left: 4px">
						<view :class="[priceIndex==1 ? 'triangle-up-active' : 'triangle-up']"></view>
						<view :class="[priceIndex==1 ? 'triangle-down ' : 'triangle-down-active']"></view>
					</view>
				</view>
			</view>
			<!-- 导航 -->

			<view class="flex-start-center margin-top_30rpx ">
				<view class="timeTab flex-column " v-for="(item, index) in orderStatusArr" :key="index">
					<view class="flex">
						<view :class="[currentIndex == index ? 'active' : 'height57']" @click="switchTimeTab(index)">
							{{ item.value }}
						</view>
						<!-- <view v-if="!index==orderStatusArr.length-1" class="margin-left_30rpx" >
							| 
						</view> -->
					</view>

					<view :class="[currentIndex == index ? 'activeLine' : 'height57']">
					</view>
				</view>


			</view>
			<!-- 套餐卡列表 -->
			<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
				@up="upCallback" :up="upOption" :down="downOption">
				<block v-for="(item, j) in list" :key="j">
					<view v-if="currentIndex==0" class="packageCardArr flex-column-between"
						:style="{ '--bg-image': `url(${item.style})` }">
						<view class="flex-between ">

							<image class="avatar" :src="item.logo" mode=""></image>

							<view class=" flex-column-between-start " style="height: 100rpx;">
								<text class="font-overflow centerText price"> {{item.name}}{{'('+item.number+')'}}
								</text>
								<text class="font-overflow centerText priceText">{{item.desc}}</text>
							</view>
							<view class="rechargeBtn flex" @click="rechargeFn(item)">
								充值
							</view>
						</view>
						<view style="color: rgba(255, 255, 255, 0.63);margin-top: 8rpx;">
							<text>已有<text>{{item.sales_volume}}</text>人付款</text>
						</view>
					</view>

					<view class="packageCardArr flex-column-between" :style="{ '--bg-image': `url(${item.style})` }"
						v-else>
						<view class="flex-start-center "
							style="border-bottom: 1px solid rgba(255, 255, 255, 0.25);padding-bottom: 20rpx;">

							<image class="avatar" :src="item.logo" mode=""></image>

							<view class=" flex-column-between-start margin-left_20rpx ">
								<text class="font-overflow centerText price">
									{{item.name}}{{'('+item.total_num+')'}}
								</text>
								<text style="color: rgba(255, 255, 255, 0.63)"
									class="font-overflow centerText margin-top_10rpx">
									{{ '已使用：' + (Number(item.total_num)-Number(item.num)) + ' | 未使用：' + item.num }}
								</text>
							</view>
							<view class=" flex" @click="rechargeFn()">

							</view>
						</view>
						<view class="flex-around" style="color: rgba(255, 255, 255, 0.63);margin-top: 20rpx;">
							<view class="flex">

								<image class="icon " @click='closeBuyPackagePopup()' src="../../static/会员卡yi/组合 937.png"
									mode=""></image>
								<text @click="verificationRecords(item)">核销记录</text>

							</view>
							<view style="color:rgba(255, 255, 255, 0.45)">
								|
							</view>
							<view class="flex">

								<image @click='closeBuyPackagePopup' class="icon" src="../../static/会员卡yi/组合 938.png"
									mode="">
								</image>
								<text @click="scanFn(item.id)">核销二维码</text>
							</view>
						</view>
					</view>
				</block>
			</mescroll-body>

		</view>
		<!-- 购买套餐弹框 -->

		<sunui-popup ref="buyPackagePopup">
			<template v-slot:content>

				<view class="buyPackagePopupContain ">
					<view class="top flex-end">


						<uni-icons @click='closeBuyPackagePopup' class="uniIcon" type="closeempty" size="20"
							style="color: #07070791;">
						</uni-icons>
					</view>
					<view style="font-size: 36rpx;font-weight: 600;">
						{{packageCardInfo.name}}{{'('+packageCardInfo.number+')'}}
					</view>
					<view style="margin: 20rpx 0;color: rgb(102, 102, 102);font-size: 24rpx;">
						{{packageCardInfo.desc}}
					</view>
					<!-- 选择套餐 -->
					<view class="packagePop">
						<view class="flex-start-center">
							<view class="packageTitle">

							</view>
							<view>
								选择套餐
							</view>
						</view>
					</view>
					<!-- 套餐内容 -->
					<view class="flex-wrap">
						<view class="packagePopConent flex-column">
							<view class="packageColor">
								￥{{packageCardInfo.price}}
							</view>
							<view style="color: rgb(51, 51, 51);font-size: 24rpx;font-weight: 400;">
								{{packageCardInfo.number}}次套餐卡
							</view>
						</view>
						<!-- <view class="packagePopConent-noActive flex-column">
							<view class="packageColor-noActive">
								￥250
							</view>
							<view style="color: rgb(51, 51, 51);font-size: 24rpx;font-weight: 400;">
								10次套餐卡
							</view>
						</view>
						<view class="packagePopConent flex-column">
							<view class="packageColor">
								￥250
							</view>
							<view style="color: rgb(51, 51, 51);font-size: 24rpx;font-weight: 400;">
								10次套餐卡
							</view>
						</view> -->

					</view>
					<!-- 说明介绍 -->
					<view class="packagePop" style="margin-top: 36rpx;">
						<view class="flex-start-center">
							<view class="packageTitle">

							</view>
							<view>
								说明介绍
							</view>

						</view>
						<view style="margin-top: 20rpx;" v-html="packageCardInfo.remark">

						</view>
					</view>
					<!-- 立即购卡 -->
					<view class="buyCard flex" @click="buyPackageCard()">
						立即购卡

					</view>
				</view>

			</template>
		</sunui-popup>
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>

				<view class="flex-column myPackagePopupClass">
					<view style="text-align: center; " class="margin-bottom_20rpx">
						扫描下方二维码，进行核销！
					</view>
					<!-- <view class="membershipCode flex">
					
						<view style="color: #000;" @click="generateBarcode()">
							{{!isGenerateBarcode?'生成pc码':'生成二维码'}}
					
						</view>
							
					</view> -->
				<!-- 	<uqrcode v-if="!isGenerateBarcode" ref="qrcode" canvas-id="qrcode"
						:value="code"
						size="200"></uqrcode> -->
					<uqrcode  ref="qrcode" canvas-id="qrcode"
							:value="id"
							size="200"></uqrcode>
					<template v-slot:loading>
						<text style="color: green;">loading...</text>
					</template>
					</uqrcode>
					<!-- <image class="qrcode" :src="followThePublicAccount"></image> -->
					<!-- <image class="qrcode" src="../../static/会员卡商城加套餐卡/矩形 171.png" mode=""></image> -->

					<!-- <button size="mini" @click="paste(followThePublicAccount)" type="primary"
					plain="true">复制链接</button> -->


				</view>

			</template>
		</sunui-popup>
		<sunui-popup ref="popPay">
			<template v-slot:content>
				<view class="v-pop-pay flex-column">
					<view class="v-pay-title flex-end">
						<image src="/static/delect.png" @click="popPayClose()"></image>
					</view>
					<view class="title-pay">确定支付</view>
					<view class="v-pay-money flex">
						￥
						<text>{{(Math.floor(packageCardInfo.price* Number(discount)) / 100).toFixed(2)}}</text>
					</view>
					<view class="v-pay-padding">
						<radio-group name="apply" @change="handleApplyType" style="padding: 0rpx 62rpx;">
							<view class="flex-between v-m-recharge v-border-btn">
								<view class="flex-align-center">
									<view class="v-wx-icon flex">
										<image src="/static/zfwx.png"></image>
									</view>
									<view class="flex-columns">
										<view class="wx">微信支付</view>
										<view class="ye">支持微信支付</view>
									</view>
								</view>
								<label>
									<radio value="2" color="#19c866" style="transform:scale(0.8);" checked />
								</label>
							</view>
							<view class="flex-between v-m-recharge">
								<view class="flex-align-center">
									<view class="v-wx-icon flex">
										<image src="/static/会员卡商城加套餐卡/Group 3461.png"></image>
									</view>
									<view class="flex-columns">
										<view class="wx">我的余额</view>
										<!-- 注意：查询余额账户 -->
										<view class="ye">当前账户余额 ￥{{balance}}</view>
									</view>
								</view>
								<label>
									<!-- <radio
										value="1"
										color="#19c866"
										:class="balanceMoney <= 0 || Number(balanceMoney) < Number(payInfo.disbursements) ? 'radio-disabled' : ''"
										style="transform:scale(0.8);"
										:disabled="balanceMoney <= 0 || Number(balanceMoney) < Number(payInfo.disbursements) ? true : false"
									/> -->
									<radio value="1" color="#19c866" class="radio-disabled"
										style="transform:scale(0.8);" :disabled="false" />
								</label>
							</view>
						</radio-group>
					</view>
					<view class="v-pay-btn flex" @click="payment()">支付</view>
				</view>
			</template>
		</sunui-popup>
	</view>
</template>

<script>
	// import UQRCodeStyleRound from '../../uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.style.round.js';
	import TabBar from '../../components/jinjie-tabbar/jinjie-tabbar.vue'
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				tabIndex: 3,
				showMiddleButtonBar: true,
				searchVal: '',
				orderStatusArr: [{
						value: '未购买'
					},
					{
						value: '已购买'
					},

				],
				downOption: {
					auto: true
				},
				listPoster: [],
				// 上拉配置项
				upOption: {
					auto: true
				},
				windowHeight: '',
				currentIndex: '0',
				// 1 表示升序 2 表示降序（销量）
				salesVolumeIndex: 1,
				// 1 表示升序 2 表示降序（价格）
				priceIndex: 1,
				// 套餐卡信息
				packageCardInfo: '',
				// 余额
				balance: '',
				isGenerateBarcode:false,
				//  1 余额 2 微信
				form: {
					pay_way: 2,
					id: ''
				},
				sales_volume_sort: 'asc',
				price_sort: "asc",
				// 套餐卡列表（未购买）notPurchased
				packageList: [{
						img: '../../static/会员卡首页1/椭圆 1.png',
						text: '价值300元礼品卡（ 价值300元礼品卡 价值300元礼品卡 价值300元礼品卡',
						content: '仅限炸鸡限定4人套餐使用其他产品不参套餐使用其他产品不参套餐使用其他产品不参套餐使用其他产品不参',
						number: '6666'
					},
					{
						img: '../../static/会员卡首页1/椭圆 1.png',
						text: '价值300元礼品卡（ 价值300元礼品卡 价值300元礼品卡 价值300元礼品卡',
						content: '价值300元礼品卡（ 价值300元礼品卡 价值300元礼品卡 价值300元礼品卡',
						number: '6666'
					},
					{
						img: '../../static/会员卡首页1/椭圆 1.png',
						text: '价值300元礼品卡（ 价值300元礼品卡 价值300元礼品卡 价值300元礼品卡',
						content: '价值300元礼品卡（ 价值300元礼品卡 价值300元礼品卡 价值300元礼品卡',
						number: '6666'
					},
					{
						img: '../../static/会员卡首页1/椭圆 1.png',
						text: '价值300元礼品卡（ 价值300元礼品卡 价值300元礼品卡 价值300元礼品卡',
						content: '价值300元礼品卡（ 价值300元礼品卡 价值300元礼品卡 价值300元礼品卡',
						number: '6666'
					}
				],
				// 套餐卡列表（已经购买） 
				buyPackageList: [{
						img: '../../static/会员卡首页1/椭圆 1.png',
						text: '价值300元礼品卡（ 价值300元礼品卡 价值300元礼品卡 价值300元礼品卡',
						used: 10,
						noUser: 5
					},
					{
						img: '../../static/会员卡首页1/椭圆 1.png',
						text: '价值300元礼品卡（ 价值300元礼品卡 价值300元礼品卡 价值300元礼品卡',
						used: 10,
						noUser: 5
					}
				],
				list: [],
				autoplay: true,
				interval: 3000,
				token: uni.getStorageSync('login').token,
				// 核销参数
				rand_code: '',
				// 用户id
				uid: '',
				// 卡券id
				id: '',
				discount: '',
				isSuccess: false,
				code:''

			}
		},
		onLaunch() {
			//隐藏官方的tabBar
			uni.hideTabBar()
		},
		onReady() {
			// /* 注册扩展插件 */
			// this.$refs.qrcode.registerStyle(UQRCodeStyleRound); // qrcode为组件的ref名称
		},
		onLoad() {
			console.log('page Show')
           

		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 600;
				}
			});
			this.init()
			// 查询用户余额
			this.userinfoFn()
			this.mescroll?.resetUpScroll();
			this.$at.releaseKey('submit');
			this.$at.releaseKey('submitWxPay');
		},

		methods: {
			generateBarcode(){
				this.isGenerateBarcode=!this.isGenerateBarcode
				
				
			},
			changeInput(e) {
				console.log(e)
				this.searchVal = e.detail.value
				this.mescroll?.resetUpScroll();
			},
			// 获取轮播图
			async init() {
				const resPoster = await this.$http.post({
					url: this.$api.poster,
					data: {

						type: 2

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {



					console.log(resPoster.data)
					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.listPoster = resPoster.data.filter(item => item.type == 2);

					// this.$sun.toast(resPoster.msg, 'none')


				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}

				const resClass = await this.$http.post({
					url: this.$api.classifyList,
					data: {



					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resClass.code == 0) {



					console.log(resClass.data)

					this.classifyList = resClass.data
					// this.$sun.toast(resPoster.msg, 'none')


				} else {

					this.$sun.toast(resClass.msg, 'none')
				}
				const resDiscount = await this.$http.post({
					url: this.$api.packageDiscount,
					data: {



					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resDiscount.code == 0) {



					console.log(resDiscount.data)

					this.discount = resDiscount.data.discount
					// this.$sun.toast(resPoster.msg, 'none')


				} else {

					this.$sun.toast(resDiscount.msg, 'none')
				}

				// goodsList

			},

			async payment() {
				// 获取折扣
				console.log(this.form.pay_way)
				if (this.form.pay_way == 1) {
					// 判断当前 余额是否大于购买套餐的金额 否则不可以付款
					this.$at.uniDoFunc({
						key: 'submit',
						success: async () => {
							this.$at.lockKey('submit');
							console.log(Number(this.balance).toFixed(0), Number(this.packageCardInfo.price)
								.toFixed(0))
							// 登录 需要进行判断当前账号密码 和账号归属店铺及角色是否又选择
							// (Math.floor(((price* this.discount)/ 100)* 10 )/10).toFixed(2)
							if (Number(this.balance) >= Number((Math.floor(this.packageCardInfo.price *
									Number(this.discount)) / 100).toFixed(2))) {
								console.log(this.form)
								this.$sun.toast('余额支付')
								const result = await this.$http.post({
									url: this.$api.createPackageOrder,
									data: {
										...this.form

									},
									headers: {
										'Authorization': `Bearer ${this.token}`
									}

								})

								if (result.code == 0) {


									this.$sun.toast(result.msg, 'none')
									setTimeout(() => {

										this.$refs.popPay.close()
										this.$refs.buyPackagePopup.close()
										this.currentIndex = 1;

										this.mescroll?.resetUpScroll();
									}, 800)
									this.$at.releaseKey('submit');
								} else {

									this.$sun.toast(result.msg, 'none')
									this.$at.releaseKey('submit');
								}
							} else {
								this.$sun.toast('余额不足', 'none')
								this.$at.releaseKey('submit');
							}

						}
					});


				} else {
					
					this.$at.uniDoFunc({
						key: 'submitWxPay',
						success: async () => {
							this.$at.lockKey('submitWxPay');



							const result = await this.$http.post({
								url: this.$api.createPackageOrder,
								data: {
									...this.form

								},
								headers: {
									'Authorization': `Bearer ${this.token}`
								}

							})

							if (result.code == 0) {
								let pay = result.data
								this.$at.releaseKey('submitWxPay');
								await this.$wx.config({
									debug: false,
									appId: pay.appid,
									timestamp: pay.timeStamp,
									nonceStr: pay.nonceStr,
									paySign: pay.paySign,
									jsApiList: ['chooseWXPay']
								});
								await this.$wx.chooseWXPay({
									timestamp: pay.timeStamp,
									nonceStr: pay.nonceStr,
									package: pay.package,
									signType: pay.signType,
									paySign: pay.paySign,
									appId: pay.appId,

									success: async res => {
										this.isSuccess = true;
										this.$sun.toast('进入支付成功111');
										console.log('进入支付成功2222222', res);
                                   this.$at.releaseKey('submitWxPay');
										// 后台修改状态，则不需要重复调用接口
										// this.wxOrder();
									},
									fail: async err => {
										this.$sun.toast('取消了支付');

									
										
										this.$at.releaseKey('submitWxPay');
									},
									complete: async res => {
										if (this.isSuccess == true) {
											console.log('进入支付成功回调===========', res);
										
                                            setTimeout(() => {
                                            
                                            	this.$refs.popPay.close()
                                            	this.$refs.buyPackagePopup.close()
                                            	this.currentIndex = 1;
                                            
                                            	this.mescroll?.resetUpScroll();
                                            }, 800)
										} else {
											this.$sun.toast('取消了支付');
											this.$at.releaseKey('submitWxPay');


										}
										console.log('进入测试回调===========', res);
									}
								});



							} else {

								this.$sun.toast(resPoster.msg, 'none')
								this.$at.releaseKey('submitWxPay');
							}


						}
					});
				}
			},
			async upCallback(scroll) {
				const packList = this.currentIndex == 0 ? this.$api.packageList : this.$api.myPackage

				const result = await this.$http.post({
					url: packList,
					data: {
						page: scroll.num,
						limit: 1000,
						sales_volume_sort: this.sales_volume_sort,
						price_sort: this.price_sort,
						name: this.searchVal

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);

					console.log('this.list', this.list, this.list.length);
				}
			},
			async switchTimeTab(index) {

				this.currentIndex = index;

				// 
				this.mescroll?.resetUpScroll();



			},
			handleApplyType(e) {
				console.log(e)
				// 1 余额 2 微信支付
				this.form.pay_way = e.detail.value


			},
			mypackageFn(e) {
				// 跳本地 ， 2 跳h5 ，3 跳小程序
				if (e.jump_way == 1) {
					this.$sun.toast('目前暂不支持本地跳转', 'none')
				} else if (e.jump_way == 2) {
					window.location.href = e.link
				} else {
					// 跳转小程序
					this.$sun.toast('跳转小程序', 'none')
				}
			},
			// 领取优惠券
			rechargeFn(item) {
				// 套餐卡信息
				this.form.id = item.id
				this.packageCardInfo = item
				this.$refs.buyPackagePopup.show({
					anim: 'bottom',
					position: 'bottom',
					shadeClose: true, //false使用户不能点击其它关闭页面
					topclose: false,
					zIndex: 99999
				});

			},
			// 关闭领取优惠券弹框
			closeBuyPackagePopup() {
				this.$refs.buyPackagePopup.close()
			},
			buyPackageCard() {
				console.log('12222')
				this.$refs.popPay.show({
					style: 'width:322px; height:auto;background-color: #FFFFFF;border-radius: 5px;',
					anim: 'center',
					shadeClose: true, //使用户不能点击其它关闭页面 true 可以关闭 false 不可以关闭
					topclose: false,
					zIndex: 110000
				});
			},
			// 核销记录
			verificationRecords(item) {
				this.$sun.navGo('/pages/packageCard/verificationRecords/verificationRecords', {
					...item
				})
			},
			// 核销二维码
			async scanFn(id) {

				const resPoster = await this.$http.post({
					url: this.$api.packageParameter,
					data: {

						id: id

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {


					this.rand_code = resPoster.data.rand_code
					this.uid = resPoster.data.uid
					this.id = resPoster.data.id
                    this.$refs.myPackagePopup.show({
                    	style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:50rpx;',
                    	bottomClose: true,
                    	shadeClose: true,
                    	topclose: true
                    });
                    // this.code=window.location?.origin+'/H5/gongzhManagement.html#/pages/cashierSystem/verificationPage/verificationPage?rand_code=' + this.rand_code +'&id='+ this.id + '&uid=' + this.uid
				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}
			

			},
			// 销量 升序和降序
			salesVolume() {

				if (this.salesVolumeIndex == 1) {
					this.salesVolumeIndex = 2
					this.sales_volume_sort = 'desc'
					this.mescroll?.resetUpScroll();
					console.log('降序')
				} else {
					this.salesVolumeIndex = 1
					console.log('升序')
					this.sales_volume_sort = 'asc'
					this.mescroll?.resetUpScroll();
				}
			},
			// 价格升序和降序
			price() {
				if (this.priceIndex == 1) {
					this.priceIndex = 2
					this.price_sort = 'desc'
					this.mescroll?.resetUpScroll();
				} else {
					this.priceIndex = 1
					this.price_sort = 'asc'
					this.mescroll?.resetUpScroll();
				}
			},
			async userinfoFn() {
				const resPoster = await this.$http.post({
					url: this.$api.userinfo,
					data: {

						id: uni.getStorageSync('userId'),

					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}

				})

				if (resPoster.code == 0) {



					console.log(resPoster.data.balance)
					// 	// 展示区域  1 首页 2 商城 3 套餐卡市场 这里还需要区分

					this.balance = resPoster.data.balance

					// this.$sun.toast(resPoster.msg, 'none')


				} else {

					this.$sun.toast(resPoster.msg, 'none')
				}
			}


		}
	}
</script>

<style lang="less" scoped>
   
	// 支付选择 微信/余额
	.v-pop-pay {

		position: relative;
		z-index: 202009888 !important;

		.v-pay-title {
			width: 100%;

			view {
				margin-left: 34rpx;
				color: #999999;
				font-size: 32rpx;
			}

			image {
				padding: 42rpx 46rpx 30rpx;
				width: 26rpx;
				height: 26rpx;
			}
		}

		.title-pay {
			font-size: 32rpx;
			color: #333;
			margin-top: -10rpx;
		}

		.v-pay-money {
			color: #333;
			font-weight: bold;
			font-size: 40rpx;
			padding: 15rpx 0 30rpx;

			text {
				font-size: 60rpx;
			}
		}

		.v-zf-discount {
			padding-bottom: 20rpx;

			text {
				font-size: 28rpx;
				color: #ff0000;
			}
		}

		.v-pay-padding {
			width: 100%;

			.v-border-btn {
				border-bottom: 2rpx solid #f7f7f7;
			}

			.v-m-recharge {
				padding: 38rpx 0 26rpx;

				.v-wx-icon {
					border-radius: 10rpx;
					width: 56rpx;
					height: 56rpx;
					margin-right: 26rpx;

					image {
						width: 56rpx;
						height: 56rpx;
					}
				}

				.wx {
					font-size: 32rpx;
				}

				.ye {
					font-size: 24rpx;
					color: #999999;
					margin-top: 14rpx;
				}
			}
		}

		.v-pay-btn {
			width: 550rpx;
			height: 90rpx;
			font-weight: bold;
			font-size: 32rpx;
			border-radius: 56rem;
			color: #fff;
			background: linear-gradient(90deg, #0ac364 0%, #14df79 100%);
			margin: 76rpx 46rpx 52rpx;
		}
	}

	page {
		background: rgb(238, 240, 244);
	}

	.myPackagePopupClass {
		.qrcode {
			margin-top: 10rpx;
		}
		.membershipCode {
			width: 164rpx;
			height: 50rpx;
			background: #eaeaea;
			margin-bottom: 20rpx;
		
		}
	}

	.buyPackagePopupContain {
		background-color: #fff;
		height: 58vh;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 30rpx;
		// height: auto;
		overflow: auto;

		.packagePop {
			margin-bottom: 30rpx;

			.packageTitle {
				width: 8rpx;
				height: 30rpx;
				background: rgb(255, 0, 0);
				margin-right: 10rpx;
			}
		}

		.packagePopConent {
			width: 212rpx;
			height: 146rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			box-sizing: border-box;
			border: 2rpx solid rgb(255, 167, 167);
			border-radius: 20rpx;

			background: rgb(255, 249, 249);
		}

		.packageColor {
			color: rgb(255, 0, 0);
			font-size: 40rpx;
			font-weight: 600;
		}

		.packageColor-noActive {
			color: rgb(51, 51, 51);
			font-size: 40rpx;
			font-weight: 600;
		}

		.packagePopConent-noActive {
			width: 212rpx;
			height: 146rpx;
			margin-right: 16rpx;
			margin-bottom: 16rpx;
			box-sizing: border-box;
			border: 1px solid rgb(225, 225, 225);
			border-radius: 10px;

			background: rgb(255, 255, 255);
		}

		.buyCard {
			position: fixed;
			border-radius: 154rpx;
			width: 600rpx;
			height: 88rpx;
			bottom: 20rpx;
			background: rgb(239, 93, 49);
			color: rgb(255, 255, 255);

			font-size: 32rpx;
			font-weight: 500;
			margin-left: 55rpx;
		}

	}

	.packageCardContainer {

		.backgroundImg {

			height: 262rpx;
			// position: absolute;
			// z-index: 9;
			// right: 20rpx;
			// top: 36rpx;
			// background: url('../../static/会员卡商城加套餐卡/组合 411.png');
			background-repeat: no-repeat;
			background-size: contain;

			// text-align: center;
			.padding50 {
				padding: 90rpx;

				text {
					color: rgb(254, 242, 198);

					font-size: 38rpx;
					font-weight: 700;
				}

				image {
					margin-left: 10rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}

		}

		.packageCardList {
			border-radius: 20rpx 20rpx 0rpx 0rpx;

			background: rgb(238, 240, 244);

			padding: 32rpx 26rpx;
			position: relative;
			margin-top: 40rpx;
			z-index: 999;

			.packageCardArr {

				margin-top: 32rpx;
				padding: 25rpx 20rpx;

				border-radius: 10px;
				background-repeat: no-repeat;
				background-size: cover;
				background-image: (var(--bg-image));

				.avatar {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;

				}

				.icon {
					width: 35rpx;
					height: 35rpx;
					margin-right: 5rpx;
				}

				.rechargeBtn {
					width: 110rpx;
					height: 52rpx;
					border-radius: 20rpx;

					background: rgb(255, 255, 255);
				}

				.centerText {
					width: 438rpx;
				}

				.price {
					color: rgb(255, 255, 255);
					font-size: 32rpx;
					font-weight: 500;
				}

				.priceText {
					color: rgb(255, 255, 255);
					font-size: 24rpx;
					font-weight: 400;
				}
			}
            // .packageCardArr::before {
            // 	content: "";
            // 	position: absolute;
            // 	top: 0;
            // 	left: 0;
            // 	width: 100%;
            // 	height: 100%;
            // 	border-radius: 20rpx;
            // 	background: rgba(0, 0, 0, 0.1);
            // 	/* 半透明黑色背景 */
            // }
			.search-content {
				justify-content: center;
				display: flex;
				align-items: center;
				width: 446rpx;
				height: 88rpx;

				background: #f6f6f6;
				border-radius: 84rpx;

				.search-img {
					width: 30rpx;
					height: 30rpx;
					margin-right: 20rpx;
					margin-left: 40rpx;
				}

				.icon_close {
					padding: 0rpx 15rpx;
					width: 36rpx;
					height: 36rpx;
					margin-right: 30rpx;
				}
			}

			.triangle-up {
				width: 0;
				height: 0;

				border-left: 7px solid transparent;
				border-right: 7px solid transparent;
				border-bottom: 7px solid #c0c4cc;
			}

			.triangle-up-active {
				width: 0;
				height: 0;

				border-left: 7px solid transparent;
				border-right: 7px solid transparent;
				border-bottom: 7px solid rgb(83, 83, 83);
				;
			}

			.triangle-down-active {
				margin-top: 3px;
				width: 0;
				height: 0;
				border-left: 7px solid transparent;
				border-right: 7px solid transparent;
				border-top: 7px solid rgb(83, 83, 83);
				;
			}

			.triangle-down {
				margin-top: 3px;
				width: 0;
				height: 0;
				border-left: 7px solid transparent;
				border-right: 7px solid transparent;
				border-top: 7px solid #c0c4cc;
			}

			.timeTab {

				margin-right: 20px;
				font-weight: 600;

				.active {

					color: rgb(253, 97, 18);
					text-align: center;

				}

				.height57 {

					height: 26rpx
				}

				.activeLine {

					width: 21px;
					height: 3px;
					background: rgb(253, 97, 18);
					margin-top: 9rpx;

				}
			}
		}
	}
</style>